import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class DrawerDemo extends StatelessWidget {
  // 绑定Scaffold的ScaffoldState，可全局使用
  // 也可通过Builder来获取Scaffold的State
  final _scaffoldkey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldkey,
      appBar: AppBar(
        title: Text('抽屉组件示例'),
        centerTitle: true,
      ),
      //抽屉菜单
      drawer: MediaQuery.removePadding(
          context: context,
          //移除抽屉菜单顶部默认留白
          removeTop: true,
          child: Drawer(
            child: ListView(
              children: <Widget>[
                Container(
                  padding: EdgeInsets.only(top: 24),
                  color: Theme.of(context).accentColor,
                  //设置用户信息头像、用户名、Email等
                  child: UserAccountsDrawerHeader(
                    margin: EdgeInsets.only(bottom: 8),
                    accountName: Text('文阿花'),
                    accountEmail: Text('1107933929@qq.com'),
                    //设置用户头像
                    currentAccountPicture: CircleAvatar(
                      backgroundImage: AssetImage('images/card03.png'),
                    ),
                    onDetailsPressed: () {
                      //关闭抽屉菜单
                      if (_scaffoldkey.currentState!.isDrawerOpen) {
                        Navigator.pop(context, true);
                      }
                    },
                    //属性本来是用来设置当前用户的其他账号的头像，位置位于右边
                    otherAccountsPictures: <Widget>[
                      Container(
                        child: Image.asset('images/animal01.png'),
                      )
                    ],
                  ),
                ),
                //下部选项
                ListTile(
                  leading: CircleAvatar(
                    child: Icon(Icons.reorder),
                  ),
                  title: Text('我的订单'),
                ),
                ListTile(
                  leading: CircleAvatar(
                    child: Icon(Icons.color_lens),
                  ),
                  title: Text('我的特权'),
                ),
              ],
            ),
          )),
      body: Center(child: Text('抽屉')),
    );
  }
}
